<template>
  <div class="tabbar">
    <div class="tabbar-wrap sa-flex" :style="wrapStyle()">
      <div
        class="tabbar-item"
        :class="
          compData.list.length % 2 == 1 &&
          compData.mode == 2 &&
          cindex == ((compData.list.length % 2) + compData.list.length) / 2 - 1
            ? 'center-item'
            : ''
        "
        v-for="(cd, cindex) in compData.list"
        :key="cd"
        :style="{
          width: 100 / compData.list.length + '%',
        }"
      >
        <div class="image-wrap">
          <sa-image
            :url="cindex == 0 ? cd.activeIcon : cd.inactiveIcon"
            :size="26"
            :suffix="null"
          ></sa-image>
        </div>
        <div
          class="text"
          :style="{
            color: cindex == 0 ? compData.activeColor : compData.inactiveColor,
          }"
        >
          {{ cd.text }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { checkUrl } from '@/sheep/utils/checkUrlSuffix';

  const props = defineProps(['compData']);

  function wrapStyle() {
    return {
      background:
        props.compData.background.type == 'color'
          ? props.compData.background.bgColor
          : props.compData.background.bgImage
          ? 'url(' + checkUrl(props.compData.background.bgImage) + ')'
          : props.compData.background.bgImage,
      'background-size': '100% 58px',
      'background-repeat': 'no-repeat',
    };
  }
</script>

<style lang="scss" scoped>
  .tabbar {
    height: 100%;
    // position: relative;

    .tabbar-wrap {
      position: absolute;
      right: 0;
      bottom: 0;
      left: 0;
      height: 58px;
    }
    .tabbar-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      &.center-item {
        .image-wrap {
          width: 49px;
          height: 49px;
          border-radius: 50%;
          background: #f00;
          margin-bottom: 4px;
          background: linear-gradient(123deg, #fe8c00 0%, #ff6000 100%);
          box-shadow: 0 9px 13px 5px rgba(254, 129, 0, 0.22);
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .text {
          display: none;
        }
      }
    }
  }
</style>
